import * as React from 'react';
import {View} from 'react-native';
import Animated, {useSharedValue} from 'react-native-reanimated';
import Carousel from 'react-native-reanimated-carousel';
import {SBImageItem} from './SBImageItem';
import {PaginationItem} from './PaginationItem';

const colors = [
  '#26292E',
  '#899F9C',
  '#B3C680',
  '#5C6265',
  '#F5D399',
  '#F1F1F1',
];

function ImageCarousel(props: any) {
  const [isVertical, setIsVertical] = React.useState(props.vertical);
  const [autoPlay, setAutoPlay] = React.useState(props.autoPlay);
  const [pagingEnabled, setPagingEnabled] = React.useState<boolean>(
    props.pagingEnabled,
  );
  const [snapEnabled, setSnapEnabled] = React.useState<boolean>(
    props.snapEnabled,
  );
  const progressValue = useSharedValue<number>(0);
  const baseOptions = isVertical
    ? ({
        vertical: true,
        width: props.width,
        height: props.height,
      } as const)
    : ({
        vertical: false,
        width: props.width,
        height: props.height,
      } as const);

  return (
    <View
      style={{
        alignItems: 'center',
      }}>
      <Carousel
        {...baseOptions}
        style={{
          width: props.width,
        }}
        loop
        pagingEnabled={pagingEnabled}
        snapEnabled={snapEnabled}
        autoPlay={autoPlay}
        autoPlayInterval={10000}
        onProgressChange={(_, absoluteProgress) =>
          (progressValue.value = absoluteProgress)
        }
        mode="parallax"
        modeConfig={{
          parallaxScrollingScale: 0.9,
          parallaxScrollingOffset: 50,
        }}
        data={props.data}
        renderItem={props.renderItem}
      />
      {!!progressValue && (
        <View
          style={
            isVertical
              ? {
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                  width: 10,
                  alignSelf: 'center',
                  position: 'absolute',
                  right: 5,
                  top: 40,
                }
              : {
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  width: 100,
                  alignSelf: 'center',
                }
          }>
          {props.data.map((backgroundColor, index) => {
            return (
              <PaginationItem
                backgroundColor={'gray'}
                animValue={progressValue}
                index={index}
                key={index}
                isRotate={isVertical}
                length={props.data.length}
              />
            );
          })}
        </View>
      )}
    </View>
  );
}

export default ImageCarousel;
